import Living from '@c/live-icon'
import Image from '@c/image'
import Link from 'next/link'
import styles from './index.module.scss'
import cm from 'classnames'
import { useRouter } from 'next/router'

const Index = props => {
  const router = useRouter()
  const { id } = router.query
  const { data } = props
  return (
    <div className={styles.jujiBox}>
      <div className={styles.liveTitle}>直播频道</div>
      <div className={styles.jujiContent}>
        {data.map((item, index) => {
          return (
            <Link
              href={`/live/${item.url}`}
              replace
              key={index}
              className={cm(styles.jujiItem, item.url == id ? styles.jujiActive : '')}
            >
              <img src={item.img} alt={item.name} className={styles.img} />
              <div className={styles.liveRight}>
                <div className={cm(styles.liveName, 'textEllipsis')}>{item.name}</div>
                {item.url === id ? (
                  <Living className={styles.living} />
                ) : (
                  <img src="/images/live-vip.webp" alt="vip" className={styles.liveIcon} />
                )}
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}

export default Index
